<template>
  <!-- 工作记录 -->
  <div class="body_all">
    <div class="ba_top">
      <div>
        <el-date-picker
          v-model="searchList.sdate"
          type="date"
          size="mini"
          value-format="yyyy-MM-dd"
          placeholder="跟进开始时间/创建开始时间"
        >
        </el-date-picker>
        <el-date-picker
          v-model="searchList.edate"
          type="date"
          size="mini"
          value-format="yyyy-MM-dd"
          placeholder="跟进结束时间/创建结束时间"
        >
        </el-date-picker>
        <el-input
          class="nameInput"
          v-model="searchList.kw"
          placeholder="企业/联系人"
          size="mini"
        ></el-input>
        <el-select
          v-model="searchList.status"
          size="mini"
          placeholder="请选择跟进状态"
        >
          <el-option
            v-for="item in stateList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-input
          class="nameInput"
          v-model="searchList.content"
          placeholder="跟进内容"
          size="mini"
        ></el-input>
        <el-button
          style="margin-left: 8px"
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="search"
          >搜索</el-button
        >
        <el-button
          type="refresh"
          icon="el-icon-refresh"
          @click="btnRefresh"
          size="mini"
          >重置</el-button
        >
      </div>
    </div>
    <div class="ba_main">
      <el-table
      v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        height="250"
        tooltip-effect="dark"
        style="width: 100%"
        class="ellipsis"
      >
        <el-table-column label="联系人" fixed>
          <template slot-scope="scope">
            <span>{{scope.row.contacts_name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="跟进内容">
          <template slot-scope="scope">
            <span>{{scope.row.content}}</span>
          </template>
        </el-table-column>
        <el-table-column label="企业">
          <template slot-scope="scope">
            <span>{{scope.row.customer_name}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="follow_time"
          label="跟进时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="follow_user" label="跟进人"> </el-table-column>
        <el-table-column prop="status_title" label="跟进状态">
        </el-table-column>
        <el-table-column prop="add_time" label="创建时间">
        </el-table-column>
      </el-table>
      <div class="footer">
                <span style="margin-right: 10px">共{{ datanumber }}条</span>
                <!-- <span>当前第{{ searchList.page }}页共有{{ tableData.length }}条</span> -->
                <span :class="searchList.page == 1 ? 'ban_btn_no' : ''">
                  <i
                    class="el-icon-arrow-left operable"
                    :class="searchList.page == 1 ? 'pageOff' : 'pageOn'"
                    @click="prevPage"
                  ></i>
                </span>
                <div style="display: inline; margin: 0 10px">
                  <el-input
                    :title="searchList.page"
                    style="width: 60px"
                    v-model="searchList.page"
                    @change="sizechange()"
                    size="mini"
                  ></el-input>
                  <span style="margin: 0 5px 0 15px">/</span>
                  <span>{{ pagenumber==0?'1':pagenumber }}</span>
                </div>
                <span :class="seenumber > datanumber ? 'ban_btn_no' : ''">
                  <i
                    class="el-icon-arrow-right operable"
                    :class="seenumber > datanumber ? 'pageOff' : 'pageOn'"
                    @click="nextPage"
                  ></i>
                </span>
                <span style="margin-left: 10px">每页</span>
                <el-select
                  style="width: 70px"
                  v-model="searchList.size"
                  @change="sizechange()"
                  placeholder="请选择"
                  size="mini"
                >
                  <el-option
                    v-for="item in sizennList"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                条
              </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      dialogDetails: false,
      dialogEditer: false,
      // 搜索条件
      stateList: [], // 跟进下拉数据
      sizennList: [{ value: 20 }, { value: 50 }, { value: 100 }],
      searchList: {
        page: 1,
        size:"20",
        sdate: "",
        edate: "",
        kw: "",
        status: "",
        content: "",
      },
      datanumber: "0",
      seenumber: "0",
      pagenumber: "0",
      ruleForm: {
        label: "",
        enterprise: "",
      },
      tableData: [],
    };
  },
  created() {
    this.getData();
    this.getstate();
  },
  methods: {
    // 跟进状态下拉数据
    getstate() {
      this.$cmsapi.followStatuslList().then(
        (res) => {
          if (res.code == 0) {
            this.stateList = res.data;
          } else {
            this.$message.error(res.msg);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 查询数据
    getData() {
      this.$cmsapi.followList(this.searchList).then(
        (res) => {
          if (res.code == 0) {
            this.seenumber = this.searchList.size * this.searchList.page;
            this.datanumber = res.count;
            this.pagenumber = Math.ceil(res.count / this.searchList.size);
            this.tableData = res.data;
          } else {
            this.$message.error(err.msg);
          }
          this.loading = false;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 最大条数变化
    sizechange(){
      this.loading = true;
      this.getData();
    },
    //上一页
    prevPage() {
      this.loading = true;
      this.searchList.page -= 1;
      this.getData();
    }, // 下一页
    nextPage() {
      this.loading = true;
      this.searchList.page += 1;
      this.getData();
    },
    // 搜索
    search() {
      this.loading = true;
      this.getData();
    },
    // 条件重置
    btnRefresh() {
      this.searchList = this.$options.data().searchList;
      this.loading = true;
      this.getData();
    },
    // 新增编辑
    showEditer() {
      this.dialogEditer = true;
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.dialogEditer = false;
          this.ruleForm = this.$options.data().ruleForm;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置&取消
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogEditer = false;
      this.ruleForm = this.$options.data().ruleForm;
    },
  },
};
</script>
<style scoped>
@import "../../assets/css/workbenchC/statisticsC.css";
#addComphone,
#addPhone,
#removePhone {
  cursor: pointer;
}
</style>